<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端</title>
    <style>
        .card {
            width: 400px;
            display: flex;
            justify-content: flex-start;
            margin: 10px 0;
        }

        .imgWrapper {
            width: 60px;
            height: 60px;
        }

        .img {
            width: 100%;
            height: 100%;
        }

        .rg {

        }
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--    <div>-->
<!--        <div>-->
<!--            <img src="" />-->
<!--        </div>-->
<!--        <div>-->
<!--            <div>标题：</div>-->
<!--            <div>描述：</div>-->
<!--        </div>-->
<!--    </div>-->

<div id="root">

</div>

</body>
<script>
  axios.get('http://192.168.11.213:9079/api/test/news/list').then(res => res.data).then(res => {
    const data = getNewsList(res);
    data.forEach(item => {
      document.getElementById('root').appendChild(creatCard(item))
    })


  }).catch(error => {
    console.log('服务异常',error)
  })
  fetch('http://192.168.11.213:9079/api/test/news/list').then(res=>res.json()).then(res=>{
    const data = getNewsList(res);
    data.forEach(item => {
      document.getElementById('root').appendChild(creatCard(item))
    })


  }).catch(error => {
    console.log('服务异常',error)
  })

  // const result = {
  //   msg: '请求完成',
  //   data: {
  //     baseUrl: 'http://192.168.11.213:8028/static',
  //     list: [
  //       {
  //         title: '测试图片001',
  //         description: '我是一段描述',
  //         path: '/images/abc.png',
  //       },
  //       {
  //         title: '测试图片001',
  //         description: '我是一段描述',
  //         path: '/images/avatar.jpg',
  //       },
  //       {
  //         title: '测试图片001',
  //         description: '我是一段描述',
  //         path: '/images/entry.jpg',
  //       },
  //       {
  //         title: '测试图片001',
  //         description: '我是一段描述',
  //         path: '/images/cbd.png',
  //       },
  //       {
  //         title: '测试图片001',
  //         description: '我是一段描述',
  //         path: '/images/view.jpg',
  //       },
  //     ],
  //   },
  //   code: 0,
  //   error: null,
  // };

  function creatCard(obj) {
    const card = document.createElement('div');
    card.className = 'card'
    const imgWrapper = document.createElement('div');
    imgWrapper.className = 'imgWrapper'
    const img = document.createElement('img');
    img.className = 'img'
    img.src = obj.url;
    imgWrapper.appendChild(img)
    const rg = document.createElement('div')
    const title = document.createElement('div')
    title.innerHTML = obj.title
    const desc = document.createElement('div')
    desc.innerText = obj.description;
    rg.appendChild(title)
    rg.appendChild(desc)
    card.appendChild(imgWrapper)
    card.appendChild(rg)
    return card;
  }

  function getNewsList(res) {
    return res.data.list.map((item) => {
      return {
        title: item.title,
        description: item.description,
        url: res.data.baseUrl + item.path,
      };
    });
  }
</script>
</html>
